<template>
    <div style="padding: 16px;" v-loading="data.loading">
        <el-skeleton :rows="8" size="small" :loading="data.isFisrt" animated>
            <!-- 父级字典类别详情 -->
            <el-descriptions title="字典类别详情" direction="vertical" :column="3" border>
                <template #extra>
                    <div v-if="!data.isEdit">
                        <el-button @click="event.edit" type="primary" round>编辑</el-button>
                    </div>
                    <div v-else>
                        <el-popconfirm @confirm="event.save" title="确认要保存吗？">
                            <template #reference>
                                <el-button type="primary" round>保存</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
                <el-descriptions-item label="类别名" width="33%">
                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.name }}</el-tag>
                    </template>
                    <el-input v-else type="text" v-model="data.data.name">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="关键字" width="33%">
                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.key }}</el-tag>
                    </template>
                    <el-input v-else type="text" v-model="data.data.key">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="值" width="33%">
                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.value }}</el-tag>
                    </template>
                    <el-input v-else type="text" v-model="data.data.value">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="添加人">
                    <el-tag>{{ data.data.author }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="添加时间">
                    <el-tag>{{ data.data.time }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="最后修改人">
                    <el-tag>{{ data.data.up_author == null ? "无" : data.data.up_author }}</el-tag>
                </el-descriptions-item>

                <!-- 子级字典列表 -->
                <el-descriptions-item label="子级" :span="3">
                    <div style="margin-left: 1200px;">
                        <el-button type="primary" round @click="event.model">新增</el-button>
                    </div>
                    <el-table :data="data.data.children">
                        <el-table-column label="序号" type="index" width="60"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" width="140" label="名称">
                            <template #default="scope">
                                <el-tag disable-transitions="true" round type="danger">
                                    {{ scope.row.name }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" width="120" label="值">
                            <template #default="scope">
                                <el-tag disable-transitions="true" round>
                                    {{ scope.row.value }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" width="120" label="添加人">
                            <template #default="scope">
                                <el-tag disable-transitions="true" round>
                                    {{ scope.row.author }}
                                </el-tag>
                            </template>
                        </el-table-column>

                        <el-table-column :show-overflow-tooltip="true" width="180" label="添加时间">
                            <template #default="scope">
                                <el-tag disable-transitions="true" round>
                                    {{ scope.row.time }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" width="120" label="修改人">
                            <template #default="scope">
                                <el-tag disable-transitions="true" round>
                                    {{ scope.row.update_author == null ? '无' : scope.row.update_author }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" width="120" label="使用次数" prop="name">
                            <template #default="scope">
                                <el-tag disable-transitions="true" round type="danger">
                                    {{ scope.row.useCount }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" width="200" label="描述" prop="name">
                            <template #default="scope">
                                <el-tag disable-transitions="true" round type="primary">
                                    {{ scope.row.explain }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" width="170" fixed="right" label="操作"
                            prop="value">
                            <template #default="scope">
                                <el-tooltip class="box-item" effect="light" content="编辑" placement="left-start">
                                    <el-button type="primary" :icon="Edit" circle @click="event.Up_dic(scope.row)" />
                                </el-tooltip>
                                <el-popconfirm title="确认删除吗？" v-if="scope.row.useCount === 0"
                                    @confirm="event.del_dic(scope.row.id)">
                                    <template #reference>
                                        <el-button type="danger" :icon="Delete" circle />
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-descriptions-item>
            </el-descriptions>
        </el-skeleton>
        <!-- 新增子级字典 -->
        <el-dialog v-model="data.isModel" :modal="data.isModel">
            <el-descriptions title="新增字典" direction="vertical" :column="1" border>
                <el-descriptions-item label="名称">
                    <el-input type="text" v-model="data.name">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="值">
                    <el-input type="text" v-model="data.value">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="描述">
                    <el-input type="text" v-model="data.explain">
                    </el-input>
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.isModel = false">返回</el-button>
                    <el-popconfirm @confirm="event.add" title="确定要保存吗？">
                        <template #reference>
                            <el-button type="primary">
                                确定
                            </el-button>
                        </template>
                    </el-popconfirm>

                </div>
            </template>
        </el-dialog>
        <!-- 子级的编辑 -->
        <div>
            <el-dialog v-model="data.isOpen" :modal="data.isOpen">
                <el-descriptions title="编辑字典" direction="vertical" :column="3" border>
                    <el-descriptions-item label="名称" :span="3">
                        <el-input type="text" v-model="data.dic.name">

                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="值" :span="3">
                        <el-input type="text" v-model="data.dic.value">

                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="描述" :span="3">
                        <el-input type="text" v-model="data.dic.explain">

                        </el-input>
                    </el-descriptions-item>         
                </el-descriptions>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="event.handleClose">关闭</el-button>
                    <el-popconfirm @confirm="event.editdic" title="确定要保存吗？">
                        <template #reference>
                            <el-button type="primary">
                            确定
                        </el-button>
                        </template>
                       
                    </el-popconfirm>
            
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Add_Dic, Delete_Dic, Edit_Dic, Get_Singlr_Dic_Type, Up_Dic } from '@/api/dic';
import type { dictionary_Dto } from '@/Dto/Request/dic/dictionary_Dto';
import Api_Code from '@/Dto/Response/Api_code';
import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { Delete, Edit, } from '@element-plus/icons-vue'
import { msg } from '@/utils/msg';
import { ElMessage } from 'element-plus';
import { da } from 'element-plus/es/locales.mjs';


const route = useRoute();
const data = reactive<dictionary_Dto>({
    isFisrt: true,
    loading: false,
    data: [],
    isEdit: false,
    isModel: false,
    isOpen: false,
    name: '',
    value: '',
    explain: '',
    dic: {
        id: '',
        name: '',
        value: '',
        explain: ''

    }
})

const methods = {
    async bind() {
        const res = await Get_Singlr_Dic_Type({
            id: route.params.id.toString()
        });
        if (res.code === Api_Code.ok) {
            data.data = res.data;
        }
    }
}
const event = {
    //子级字典编辑
    async editdic(){
        data.isOpen=false
        data.loading=true
        const res=await Edit_Dic({
            id:data.dic.id,
            explain:data.dic.explain,
            value:data.dic.value,
            name:data.dic.name
        })
        if(res.code===Api_Code.ok){
            
            methods.bind()
            data.loading=false
            msg(res)
        }else{
            msg(res)
        }
    },
    //关闭子级字典编辑模态框
    handleClose() {
        data.isOpen = false
    },
    ///打开子级字典编辑模态框
    Up_dic(dic: any) {
        data.isOpen = true;
        data.dic.id = dic.id
        data.dic.name = dic.name
        data.dic.value = dic.value
        data.dic.explain = dic.explain
    },
    //新增字典
    async add() {
        data.isModel = false
        if (data.name == '' || data.value == '' || data.explain == '') {
            ElMessage.error("请完整填写数据")
            return
        }
        data.loading = true
        const res = await Add_Dic({
            name: data.name || '',
            value: data.value || '',
            explain: data.explain || '',
            type: route.params.id.toString()
        })
        if (res.code === Api_Code.ok) {
            methods.bind()
            setTimeout(() => {
                data.loading = false
            }, 1000)
            data.name = '';
            data.value = '';
            data.explain = '';
            msg(res)
        } else {
            data.loading = false
            msg(res)
        }
    },
    //打开模态框
    model() {
        data.isModel = true;
    },
    //编辑类别
    edit() {
        data.isEdit = true
    },
    //删除字典
    async del_dic(id: string) {

        data.loading = true
        const res = await Delete_Dic({
            ids: [id]
        })
        if (res.code === Api_Code.ok) {
            methods.bind()
            data.loading = false
            msg(res)
        } else
            data.loading = false
        msg(res)
    },
    //修改字典类别
    async save() {
        data.loading = true
        const res = await Up_Dic({
            id: route.params.id.toString(),
            name: data.data.name,
            key: data.data.key,
            value: data.data.value
        })
        if (res.code === Api_Code.ok) {
            data.isEdit = false
            data.loading = false
            msg(res)
        } else {
            data.isEdit = false
            data.loading = false
            msg(res)
        }
    }

}

onMounted(async () => {
    await methods.bind();
    data.isFisrt = false;
})

</script>

<style scoped></style>